$color-global-white: rgba(255, 255, 255, 0.75);
$color-global-black: #000000;
$theme-color-bule: #239bf2;
$theme-color-hover: rgba(255, 255, 255, 0.4);
$theme-color-masklayer: rgba(0, 0, 0, 0.25);
$theme-color-title: #0d1a2d;

@mixin iconBox($width, $bgColr: $color-global-white, $borderRadius: 12px, $padding: 8px) {
  width: $width;
  height: $width;
  background-color: $bgColr;
  border-radius: $borderRadius;
  padding: $padding;
}

.pageWrapperScroll {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

.scrollWrap {
  overflow-x: scroll;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none;
  }
}

.pgsqlStatus {
  background: rgba(92, 97, 228, 0.15);
  border-radius: 12px;
  height: 38px;
  width: 100px;
  padding: 0px 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
}

.running {
  background: rgba(35, 155, 242, 0.15);
  color: rgba(35, 155, 242, 1);
  .circle {
    background: $theme-color-bule;
  }
}

.creating {
  background: rgba(92, 97, 228, 0.15);
  color: rgba(92, 97, 228, 1);
  .circle {
    background: #5c61e4;
  }
}

.failed {
  background: rgba(238, 65, 97, 0.15);
  color: rgba(238, 65, 97, 1);
  .circle {
    background: #ee4161;
  }
}
